
{block name="main"}
<div class="breadcrumbs" id="breadcrumbs">
    <script type="text/javascript">
        try{ace.settings.check('breadcrumbs' , 'fixed')}catch(e){}
    </script>

    <ul class="breadcrumb">
        <li>
            <i class="icon-home home-icon"></i>
            <a href="{:url('admin/index/index')}">首页</a>
        </li>

        <li>相册管理</li>
        <li class="active">相册列表</li>
    </ul><!-- .breadcrumb -->
</div>

<div class="page-content">

    <div class="row">
        <div class="col-xs-12">
            <!-- PAGE CONTENT BEGINS -->

            <div class="row">
                <div class="col-xs-12">
                    <div class="table-responsive">
                        <table id="sample-table-1" class="table table-striped table-bordered table-hover">
                            <thead>
                            <tr>
                                <th>编号</th>
                                <th>相册名称</th>
                                <th>相册描述</th>
                                <th>照片总数</th>
                                <th>创建时间</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody id="tbody">
                            {volist name='$data' id='info'}
                            <tr>
                                <td>{$info.id}</td>
                                <td>{$info.imgbox_name}</td>
                                <td>{$info.imgbox_desc}</td>
                                <td>{$info.count}</td>
                                <td>{$info.create_time}</td>
                                <td>
                                    <a  role="button" style="margin: 0 10px;" class="green editForm" data-count="{$info.count}" data-toggle="modal"> <i class="icon-edit bigger-120"></i> </a>
                                    <a href="javascript:void(0);" class="del"><span class="red"><i class="icon-trash bigger-120"></i></span>
                                    </a>
                                </td>
                            </tr>
                            {/volist}
                            </tbody>
                        </table>
                    </div><!-- /.table-responsive -->
                </div><!-- /span -->
            </div><!-- /row -->

        </div>
    </div><!-- /.row -->
</div><!-- /.page-content -->


<div id="modal-table" class="modal fade" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header no-padding">
                <div class="table-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        <span class="white">&times;</span>
                    </button>
                    编辑
                </div>
            </div>

            <div class="modal-body no-padding">

                <form class="form-horizontal" style="margin-top: 30px;" id="edit-form">
                    <div class="form-group">
                        <label class="col-sm-3 control-label no-padding-right" for="imgbox_name"> 栏目名： </label>
                        <div class="col-sm-9">
                            <input type="text" id="imgbox_name" placeholder="名称" name="imgbox_name" class="col-xs-10 col-sm-5" />
                            <span class="help-inline col-xs-12 col-sm-7">
                        <span class="middle"></span>
                    </span>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-3 control-label no-padding-right" for="imgbox_desc"> 栏目名： </label>
                        <div class="col-sm-9">
                            <input type="text" id="imgbox_desc" placeholder="名称" name="imgbox_desc" class="col-xs-10 col-sm-5" />
                            <span class="help-inline col-xs-12 col-sm-7">
                        <span class="middle"></span>
                    </span>
                        </div>
                    </div>







                    <div class="clearfix" style="margin-bottom: 30px;">
                        <div class="col-md-offset-3 col-md-9">
                            <button class="btn btn-info btn-doedit" type="button">
                                <i class="icon-ok bigger-110 edit"></i>
                                提交
                            </button>
                        </div>
                    </div>
                </form>

            </div>
            <div class="modal-footer no-margin-top">
                <button class="btn btn-sm btn-danger pull-right" id="btn-close" data-dismiss="modal">
                    <i class="icon-remove"></i>
                    Close
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- PAGE CONTENT ENDS -->


<div class="row">
    <div class="col-md-4 col-md-offset-4" id="page_div">
        {$data->render()}
    </div>
</div>

<script>

    //删除操作
    function doDel(){
        $('.del').click(function(){
            if(confirm('你确定要删除吗？')){
                var id = $(this).parent().siblings().eq(0).html();
                $.ajax({
                    type : 'delete',
                    url : '/imgbox/'+id,
                    datatype : 'json',
                    success : function(data){
                        if(data.status){
                            alert('删除成功');
                            $('#btn-close').click();
                            setTimeout(function(){
                                $('#showimgbox').click();
                            },300);
                        }else{
                            alert(data.message);
                        }
                    },
                    error : function(){
                        alert('请求失败！');
                    }
                });
            }
        });
    }
    doDel();



    function showEditForm(){
        $('.editForm').click(function(){
            var id = $(this).parent().siblings().eq(0).html();
            var imgbox_name = $(this).parent().siblings().eq(1).html();
            var imgbox_desc = $(this).parent().siblings().eq(2).html();

            $('#imgbox_name').val(imgbox_name);
            $('#imgbox_desc').val(imgbox_desc);
            var flag = true;
            if(flag){
                $("<input type='hidden' id='id' name='id'  value='"+id+"'>").prependTo('#edit-form');
                flag = false;
            }else{
                $('id').attr({'value':id });
            }
            $(this).attr({'href' : '#modal-table'});
        });
    }
    showEditForm();

    function doEdit() {
        $('.btn-doedit').click(function(){
            var info = $('#edit-form input').serialize();
            $.ajax({
                type : 'put',
                url : "/imgbox/"+id,
                data : info,
                datatype : 'json',
                success : function(data){
                    if(data.status){
                        alert('修改成功');
                        $('#btn-close').click();
                        setTimeout(function(){
                            $('#showimgbox').click();
                        },300);
                    }else{
                        alert(data.message);
                    }
                },
                error : function(){
                    alert('请求失败！');
                }
            });
        });
    }
    doEdit();

</script>

{/block}

